import './index.scss'
import {View, Input, Button, Text} from '@tarojs/components'
import {observer} from 'mobx-react'
import {useContext, useEffect} from 'react'
import {useDidHide, useDidShow} from '@tarojs/taro'
import {addVideoSurveillanceStore} from './model'

const Editvideosurveillance = () => {
  const {cameraData, initCameraDta, handleInputChange, handleSubmit} =
    useContext(addVideoSurveillanceStore)

  // 可以使用所有的 React Hooks
  useEffect(() => {
    console.log('Editvideosurveillance useEffect')
  })
  // 对应 onShow
  useDidShow(() => {
    console.log('Editvideosurveillance useDidShow')
  })
  // 对应 onHide
  useDidHide(() => {
    console.log('Editvideosurveillance useDidHide')
  })

  return (
    <View className="editvideosurveillance px-16 py-32">
      <View className="overflow-hidden mb-12">
        <View className="hanzi text-14 mb-8 flex items-center">
          <Text className="text-12 text-formItemRequire px-8">*</Text>
          摄像头名称：
        </View>
        <Input
          value={cameraData?.cameraName}
          className="h-32 px-8 border border-solid border-1 border-x_line rounded-4 text-xx_text"
          type="text"
          onInput={e => {
            handleInputChange('cameraName', e.detail.value)
          }}
        ></Input>
        <View className="hanzi text-12 text-xxx_text mt-4 whitespace-pre-wrap">
          所在位置：萤石云开放平台-控制台-设备管理-设备序列号
        </View>
      </View>
      <View className="overflow-hidden mb-12">
        <View className="hanzi text-14 mb-8 flex items-center">
          <Text className="text-12 text-formItemRequire px-8">*</Text>AppKey：
        </View>
        <Input
          value={cameraData?.appKey}
          className="h-32 px-8 border border-solid border-1 border-x_line rounded-4 text-xx_text"
          type="text"
          onInput={e => {
            handleInputChange('appKey', e.detail.value)
          }}
        ></Input>
        <View className="hanzi text-12 text-xxx_text mt-4 whitespace-pre-wrap">
          所在位置：萤石云开放平台-控制台-账号中心-应用信息-应用秘钥-AppKey
        </View>
      </View>
      <View className="overflow-hidden mb-12">
        <View className="hanzi text-14 mb-8 flex items-center">
          <Text className="text-12 text-formItemRequire px-8">*</Text>Secret：
        </View>
        <Input
          value={cameraData?.appSecret}
          className="h-32 px-8 border border-solid border-1 border-x_line rounded-4 text-xx_text"
          type="text"
          onInput={e => {
            handleInputChange('appSecret', e.detail.value)
          }}
        ></Input>
        <View className="hanzi text-12 text-xxx_text mt-4 whitespace-pre-wrap">
          所在位置：萤石云开放平台-控制台-账号中心-应用信息-应用秘钥-Secret
        </View>
      </View>
      <View className="overflow-hidden mb-12">
        <View className="hanzi text-14 mb-8 flex items-center">
          <Text className="text-12 text-formItemRequire px-8">*</Text>
          设备序列号：
        </View>
        <Input
          value={cameraData?.deviceSerial}
          className="h-32 px-8 border border-solid border-1 border-x_line rounded-4 text-xx_text"
          type="text"
          onInput={e => {
            handleInputChange('deviceSerial', e.detail.value)
          }}
        ></Input>
        <View className="hanzi text-12 text-xxx_text mt-4 whitespace-pre-wrap">
          所在位置：萤石云开放平台-控制台-设备管理-设备序列号
        </View>
      </View>
      <View className="overflow-hidden mb-12">
        <View className="hanzi text-14 mb-8 flex items-center">
          <Text className="text-12 text-formItemRequire px-8">*</Text>通道号：
        </View>
        <Input
          value={cameraData?.channelNo}
          className="h-32 px-8 border border-solid border-1 border-x_line rounded-4 text-xx_text"
          type="text"
          onInput={e => {
            handleInputChange('channelNo', e.detail.value)
          }}
        ></Input>
        <View className="hanzi text-12 text-xxx_text mt-4 whitespace-pre-wrap">
          所在位置：萤石云开放平台-控制台-设备管理-查看通道-通道号
        </View>
      </View>
      <View>
        <View className="hanzi text-14 mb-8 flex items-center">
          <Text className="text-12 text-formItemRequire px-8">*</Text>
          监控预览地址：
        </View>
        <Input
          value={cameraData?.cameraUrl}
          className="h-32 px-8 border border-solid border-1 border-x_line rounded-4 text-xx_text"
          type="text"
          onInput={e => {
            handleInputChange('cameraUrl', e.detail.value)
          }}
        ></Input>
        <View className="hanzi text-12 text-xxx_text mt-4 whitespace-pre-wrap">
          所在位置：萤石云开放平台-控制台-设备管理-查看通道-监控地址-预览地址
        </View>
      </View>

      <View className="mt-32">
        <Button className="mb-16 bg-primary text-white" onClick={handleSubmit}>
          提交
        </Button>
        <Button onClick={initCameraDta}>重置</Button>
      </View>
    </View>
  )
}
export default observer(Editvideosurveillance)
